<template>
    <el-dialog title="自动选点" :model-value="modelValue" width="30%" @closed="handleClose">
        <el-form ref="addFormRef" :model="addForm" status-icon class="">
            <el-form-item v-if="curMediaType === 1" label="电梯用途" prop="elevatorUseList" class="block">
                <el-select v-model="addForm.elevatorUseList" collapse-tags multiple filterable placeholder="请选择">
                    <el-option v-for="item in elevatorList" :key="item.code" :label="item.name" :value="item.code" />
                </el-select>
            </el-form-item>
            <el-form-item label="点位数上限" prop="totalCount">
                <el-input-number v-model="addForm.totalCount" :controls="false"></el-input-number>
            </el-form-item>
            <el-form-item label="每个楼盘点位数上限" prop="eachCount">
                <el-input-number v-model="addForm.eachCount" :controls="false"></el-input-number>
                <section v-if="!isEdit" class="tips">
                    <span class="content">上限只在本次自动选点操作中有效</span>
                </section>
            </el-form-item>
        </el-form>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="handleClose">取消</el-button>
                <el-button type="primary" @click="submit">确认</el-button>
            </span>
        </template>
    </el-dialog>
</template>

<script setup lang="ts">
import { ref, defineProps, defineEmits, computed, reactive } from 'vue';
import { elevatorUseType } from '@/utils/config';
import { preorder } from '@/api/plan.ts';
import { useStore } from 'vuex';
import { ElMessage } from 'element-plus';

const store = useStore();

const planId = computed(() => store.state.plan.planId);
const curMediaType = computed(() => store.state.plan.curMediaType);
const emits = defineEmits<{ (e: 'update:modelValue', visible: boolean): void; (e: 'success'): void }>();
const addForm = reactive({
    elevatorUseList: [],
    planId: planId.value,
    premisesIdList: [],
    totalCount: null,
    eachCount: null,
});
const elevatorList: any = computed(() => store.state.app.common.CommonList.elevatorList);
const props = defineProps({
    modelValue: {
        type: Boolean,
        default: false,
    },
    idList: {
        type: Array,
        default: () => [],
    },
    pointProperty: {
        type: Number,
        default: 0,
    },
});
const handleClose = () => {
    emits('update:modelValue', false);
};
const submit = async () => {
    const params = {
        ...addForm,
        premisesIdList: props.idList,
        hasNetwork: props.pointProperty,
    };
    await preorder(params);
    handleClose();
    ElMessage.success('操作成功！');
    emits('success');
};
</script>

<style lang="scss" scoped>
.el-form {
    .el-form-item {
        display: inline-flex;
        flex-direction: column;
        align-items: flex-start;
        vertical-align: top;
        &.block {
            display: flex;
            margin: 20px 0 16px;
            :deep(.el-form-item__content) {
                line-height: 1.3;
            }
        }
        &.columns {
            :deep(.el-form-item__content) {
                flex-direction: column;
                align-items: flex-start;
            }
        }
        :deep(.el-form-item__label) {
            line-height: 20px;
            margin-bottom: 5px;
            color: #333;
        }
        :deep(.el-date-editor),
        .el-input,
        .el-select,
        .el-input-number,
        :deep(.el-cascader),
        .tips {
            width: 280px;
            & + .el-button {
                margin-left: 20px;
            }
        }
        .el-input-number :deep(.el-input__inner) {
            text-align: left;
        }
        .tips {
            font-size: 13px;
            margin-top: 10px;
            line-height: 1.3;
            .content {
                color: var(--el-text-color-placeholder);
            }
        }
        .total-day {
            position: absolute;
            right: 0;
            top: -45px;
        }
    }
}
</style>
